<template>
  <div>
    <h3>{{photoinfo.title}}</h3>
    <p class="timeandclick">
      <span>发表时间:{{photoinfo.add_time | dataFomat}}</span>
      <span>点击:{{photoinfo.click}}次</span>
    </p>
    <hr>
    <!-- 缩略图区域 -->
    <div class="item">
      <vue-preview
        :list="list"
        :thumbImageStyle="{width: '80px', height: '80px', margin: '10px',borderRadius:'3px',boxShadow:'0 0 4px #666'}"
        :previewBoxStyle="{border: '1px solid #eee'}"
        :tapToClose="true"
        @close="closeHandler"
        @destroy="destroyHandler"
      />
    </div>
    <div class="content" v-html="photoinfo.content"></div>

    <!-- 评论区 -->
    <comment :id="id"></comment>
  </div>
</template>

<script>
import comment from "../subcponents/comment.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfo: {},
      list: []
    };
  },
  created() {
    this.getPhotoInfo();
    this.getThumImages();
  },
  methods: {
   async getPhotoInfo() {
      console.log(this.id);
     await this.$http.get("api/getimageInfo/" + this.id).then(result => {
        if (result.data.status == 0) {
          this.photoinfo = result.data.message[0];
          console.log(this.photoinfo);
        }
      });
    },
  async  getThumImages() {
     await this.$http.get("api/getthumimages/" + this.id).then(result => {
        if (result.data.status == 0) {
          result.data.message.forEach(item => {
            item.w = 600;
            item.h = 400;
          });
          this.list = result.data.message;
        }
      });
    },
    closeHandler() {
      console.log("closeHandler");
    },
    // 完全关闭之后，调用这个函数清理资源
    destroyHandler() {
      console.log("destroyHandler");
    }
  },
  components: {
    comment: comment
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 5px;
}
h3 {
  text-align: center;
  color: blue;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.timeandclick {
  display: flex;
  justify-content: space-between;
}
.item {
  margin: 5px;
  text-align: center;

}

</style>